<template>
	<view>
		<!-- 顶部操作栏 SSSSSS -->
		<view class="operation-top">
			<view>
				<view>
					<checkbox-group @change="checkAll">
						<checkbox class="round" :class="allChecked?'checked':''"></checkbox>
						<text style="font-size: 120%; margin-left: 15upx;" @click="checkAll">全选</text>
					</checkbox-group>
				</view>
			</view>
			<view>
				<view class="cu-btn round">
					<text class="cuIcon-delete" style="padding-right: 5upx;"></text>删除
				</view>
			</view>
		</view>
		<!-- 顶部操作栏 EEEEEE -->

		<!-- 底部操作栏 SSSSSS -->
		<view class="operation-bottom">
			<view>
				合计
				<text class="text-red">￥45</text>
			</view>
			<view>
				<view class="cu-btn bg-gradual-red round">
					<text class="cuIcon-moneybag" style="padding-right: 5upx;"></text>结算
				</view>
			</view>
		</view>
		<!-- 底部操作栏 EEEEEE -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allChecked: true
			}
		},
		methods: {
			checkAll: function() {
				this.allChecked = !this.allChecked
			}
		}
	}
</script>

<style>
	.operation-top {
		position: fixed;
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.operation-bottom {
		position: fixed;
		width: 100%;
		height: 100upx;
		bottom: 100upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30upx;
		padding-right: 30upx;
	}
</style>
